<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>汉心快打在线体验式学习</title>
    <meta name="description" content="汉心快打是一款拼音打字不用翻页的输入法,他不仅可以用在拼音上,还可以用在双拼上。">
    <meta name="keywords"
        content="汉心码,易学码,汉心快打,拼音如何打字变快,拼音快打,辅助码,自然双拼,小鹤双拼,辅助码下载,自然音形,zaixianshurufa,网页版拼音输入法,网页版汉心快打输入法,在线拼音输入法,网页版汉心官网输入法,中文输入法,拼音快打输入法">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="yid3ong.css">
    <link rel="stylesheet" href="sr2f.css">
    <script src="kfekowi.js"></script>
    <script src="dhiowl.js"></script>
    <script src="headke.js"></script>
    <script src="mansi.js"></script>
    <script src="vskel.js"></script>
    <script src="fewsfle.js"></script>
</head>
<style>
    body {
        background-color: #f1f1f1;
        margin: 0;
        padding: 0;
    }

    nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58);
        height: 128px;
        margin-bottom: 20px;
    }





    #shurufa {

        margin: 0 auto;
        width: 800px;

    }


    #wenbenshang {
        margin-top: 20px;
        margin-bottom: 20px;

    }

    #xiala {
        display: inline-block;
        float: left;
    }

    #zhong {
        display: inline-block;
        margin-left: 15px;
        color: gray;


    }


    select {




        left: auto;
        height: 22px;
        background-color: rgb(238, 238, 238);
        border-radius: 3px;

    }



    #qingchu {
        display: inline-block;
        float: right;
        margin-bottom: 5px;
    }



    #da {
        width: 800px;
        height: 300px;
        font-family: "Microsoft YaHei", sans-serif;
        font-size: 18px;
        border: 1px solid #ccc;

        border-radius: 5px;

        box-shadow: 5px 5px 0px #ddd, -2px -2px 0px rgb(236, 236, 236);

        background-color: white;

        margin-bottom: 20px;

        outline: none;

        border-color: rgb(207, 207, 207);

    }


    #vtl {
        display: inline-block;
    }


    #anniu {
        height: 50px;
        display: inline-block;
        float: right;
        padding-top: 20px;
        /* 设置上边距为 10px */

    }

    #gdbox,
    #checkbox,
    #sjbox {
        margin-right: 15px;
    }




    #vtl {
        position: relative;
        height: 50px;
        width: 355px;
        overflow-x: hidden;
        overflow-y: hidden;
        white-space: nowrap;
        float: left;
        border-radius: 10px;
        font-family: "Microsoft YaHei", sans-serif;
        font-size: 14px;
        padding-left: 5px;
        padding-top: 6px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        background: url('') top right no-repeat, linear-gradient(to bottom, #f8f8f8, #eeeeee);
        border: 2px solid rgb(219, 219, 219);
        padding-bottom: 6px;
    }


    #xiao {
        border: none;
        outline: none;
        -webkit-appearance: none;
        background-color: transparent;
        width: calc(100% - 6px);
    }

    #xiao,
    #lb {
        font-family: "Microsoft YaHei", sans-serif;
        font-size: 18px;
    }

    #xiao {
        color: #eb2a11;
    }

    #xiao::placeholder {
        text-align: right;
        color: rgb(197, 197, 197);
        font-size: 14px;
    }





    @media screen and (max-width: 1000px) {
        #shurufa {
            /* padding-left: 20px; */
            margin: 0 auto;
            width: 365px !important;
        }





        #checkbox,
        #gdbox,
        #sjbox,
        button {
            display: inline-block;
        }

        #vtl {}


        #anniu {
            line-height: 30px;


        }

    }

    @media screen and (max-width: 1000px) {

        #shuoming {
            margin-top: 70px;
        }

        details {
            margin-top: 1px;

        }

        #shurufa {

            margin: 0 auto;
            width: 365px;

        }

        #kong {
            height: 500px;
        }
    }

    @media screen and (max-width: 1000px) {
        #da {
            width: 365px !important;

            max-height: 150px !important;

            max-width: none !important;

            max-width: none;
        }

        nav {
            height: auto !important;
            display: flex !important;
            margin-bottom: 20px !important;

        }

        li {
            margin-bottom: 10px;
        }

        nav {
            padding: 10px;

            text-align: center;
        }
    }





    h1 {
        color: white;
        font-size: 35px;
        margin-bottom: 10px;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    li {
        margin-right: 20px;
    }

    li:last-child {
        margin-right: 0;
    }

    a {
        color: white;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }




    details {

        margin-bottom: 10px;

    }

    summary {

        cursor: pointer;
    }









    nav {
        margin-bottom: 0 !important;
    }

    @media screen and (max-width: 1000px) {

 #daziji {
  font-weight: normal;
  /* 或者 font-weight: 400; */
}

        #nav {

            margin-top: 0px;
            padding: 0;
            margin-bottom: -0px !important;
            margin-bottom: 1px !important;
        }

        iframe {
            height: 900px;
            width: 100%;
            /* 设置宽度 */

            border: none;
            /* 隐藏边框 */
        }
    }

    #daziji {
        font-weight: lighter;
        /* 将字体变细 */
    }


    /* 隐藏iFrame中的滚动条，并将其样式设置为空 */
    iframe::-webkit-scrollbar {
        width: 0;
    }

    /* 将iFrame中的滚动条轨道（track）设置为透明 */
    iframe::-webkit-scrollbar-track {
        background-color: transparent;
    }

    /* 将iFrame中的滚动条滑块（thumb）设置为透明 */
    iframe::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    iframe {
        overflow-x: hidden;
    }

    iframe {
        height: 600px;
        /* 设置高度 */
        width: 100%;
        /* 设置宽度 */

        border: none;
        /* 隐藏边框 */
    }
</style>

<body>
    <header>
        <nav>
            <h1>汉心快打在线体验式学习</h1>
            <ul>
                <li><a href="https://hanxinma.gitlab.io" target="_blank">首页</a></li>
                <li><a href=" https://hanxinma.gitlab.io/2023/03/01/pin-yin-han-xin-yong-fa/"
                        target="_blank">学习</a></li>

                <li><a href="https://hanxinma.gitlab.io/js/xz/index" target="_blank">下载/软件</a></li>
            </ul>
        </nav>
        <iframe src="daziji.html"></iframe>

        <div id="shurufa">

            <div id="dali">



                <div id="wenbenshang">
                    <div id="xiala">
                        <select onchange="window.location.href=this.value; ">

                            <option value="https://hanxinma.gitlab.io/js/pinyinban">汉心快打拼音</option>

                        </select>
                    </div>
                    <div id="zhong">
                        <details>
                            <summary>查看快打举例</summary>
                            你可以先用自己电脑输入法输入打一下,看需要多久!<br>
                            然后在用这里的输入法打一下,看需要多久?<br>
                            地名:竽僖镇<br>
                            人名: 张浠滟<br>
                            古文:噍噫枧喺，怫莳铋榉，蜮枳骱碇<br>
                            如果用本输入法只要几十秒就可以打完,点击看举例
                            <details>
                                <summary>打法举例</summary>

                                地名:竽僖镇<br>
                                竽,打yuvy,v是⺮,v=zh,⺮的读音是zh,y是于的读音<br>
                                僖,打xirk,r是亻,人的读音是r,k是喜的尾部口,所以是k<br>
                                注意全拼因为字词辅冲突多,所以aenguio这几个键,打单辅的时候<br>
                                可能需要按两次.举例:蝴.hui i单辅.但是他也和hui会重码了<br>
                                优先显示会.如果想让蝴第一位,就打hu ii.如果你记不住.一般<br>
                                也以在第二三个,可以找到. 或者你打两个辅码.hu io i是虫,o是月.<br>
                                可以去下方折叠里看偏旁部首位置图.

                                具体可以去官网看说明<br>
                                <a href="https://hanxinma.gitlab.io/2023/03/01/pin-yin-han-xin-yong-fa/" target="_blank"
                                    style="color:rgb(88, 88, 88);">官网学习,你如果是拼音就点汉心学习,如果是双拼,找双拼汉心的教程</a><br>
                                <details>
                                    <summary>全拼打法进一步了解</summary>

                                    zh在v上,sh在u上,ch在i上. 有一部分偏旁部首不在读音的键位上,<br>
                                    也是为了重码更低.详情看官网字根表.其实字根容易记,看看就记住了.<br>
                                    一个字,辅码,就取字的首末最小字根.然后单辅一般按一个键.<br>
                                    双辅,一般也可以按两个键.为了避免重码,可以最后一键按两次.<br>
                                    我们提供五笔拼音输入法助记皮肤.打字的时候就能看见.<br>
                                    然后,如果你有不会的字,不知道怎么打,就拼音加oopp查,比如<br>
                                    比如pinoopp就可以查拼字的打法.还有如果那个字你不认识,可以<br>
                                    打oo加偏旁部首首末位.就可以查音.比如oota就出溚ta读音<br>
                                    但是这个网页版为了不能太卡,就限制出很多.翻页按pgdn<br>
                                    本页面描述只是为了通俗易懂和字数限制,简化了描述.
                                    <details>
                                        <summary>进阶打法</summary>

                                        拼音的码数有点多,有时候你可以不使用全码.<br>
                                        比如说,你打拼音可以打pyl l是音的立.<br>
                                        比如说, 窗帘,chuanglian,你只需要打clg就可以出(双拼没有这个功能)<br>
                                        一般可以打字的首码,一部分两个字可以同时都打<br>
                                        这个网页版压缩了很多,只适合体验.很多词没有编码<br>
                                        他的主要用处是让一些长码变短码,从而形成快打.


                                    </details>



                                </details>

                            </details>
                        </details>

                    </div>
                    <div id="qingchu">
                        <button onclick="copyText()">复制CL+X</button>
                    </div>
                </div>


                <textarea id="da"
                    placeholder="【汉心快打拼音版】?&#10;他是一种再也不用很烦的翻页找字拼音打字法。&#10;不用翻页,不用选字。还有3键打词法。&#10;-----------------------------------------&#10;比如打字“锝“de，只要打dej，就出“锝“j是钅的读音.就可以精准打出字.媲美五笔。&#10;比如打词“光荣“guangrong，快打法，只要打出grc就可以出，(双拼没有这个功能)。c是艹字头的音&#10;其实就是利用汉字的偏旁部首的读音来做到不用选字和快打的。&#10;所以易学易用，看看就会了&#10;&#10;点下方可以体验（这几个字词的打法）&#10;去掉电脑输入法,小写字母状态,点击下方输入..."></textarea>

            </div>
            <div id="dazhi"><h3>可以在下方打de+钅=锝，gr+艹=光荣，hao+女=恏，shi+艹=莳，jiao+口=噍，yi+口=噫</h3>
           <h3> 双拼词辅体验 打yivi+口，一只就在第一位。</h3>
                      
            规则:一般是顺序取字最小的部首。打完可以体验全功版的在线输入法。这个学习体验版只能打固定的几个字词。

            
            
            </div><br>
            <div id="wenbenxia">
                <div id="vtl">
                    <div id="xiaowb">
                        <input type="text" id="xiao" oninput="document.getElementById('lb').innerHTML = this.value;"
                            autocomplete="off"
                            placeholder="←点这里输入小写字母,汉心快打输入法&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                    </div>

                    <div id="lb">
                    </div>
                </div>


                <div id="anniu">

                    <label for="checkbox">四键上屏</label><input type="checkbox" id="checkbox">
                    <label for="gdbox">停止滚动</label> <input type="checkbox" id="gdbox">
                    <label for="sjbox">手机使用</label> <input type="checkbox" id="sjbox">
                    <label for="zdbox">自动复制停</label> <input type="checkbox" id="zdbox">

                </div>


                <br><br><br><br>
                <div id="shuoming">
                    <details open>
                        <summary>点击展开查看偏旁部首对应的位置</summary>

                        <div id="zigf">
                         <img src="" alt="码表" style="max-width:99%; max-height:1000px;" />



                        </div>
                        这个怎么用?<br>
                        1：通俗的说，一般按顺序取一个字最小部分的偏旁。<br>
                        2：如果能在字根表上找到就用字根表上的。 <br>
                        3：如果找不到就猜，猜不到就用笔画。<br>
                        
                        比如，打"锝"de，肯定出不来。那加一个j，"锝"就出来了，也就是打dej，钅字旁在字元（字根）表上是j。
                        <br>
                        猜的原因，比如，小,肯定在x上，常识性的位置，没有标上去，减少干扰。<br>
                        猜不到，比如，有，𠂇，字根表上没有，你也猜不到。那就取笔画a里的一。
                        汉心是不取冷僻字根和冷僻字的，原因，也是为了降低学习成本。
                      
                        <br>
                        <details>
                            <summary>上面只是通俗的说,其实不准确,准确的点我看详细教程</summary>
                            <a href="https://hanxinma.gitlab.io/js/zy.html" target="_blank"
                                style="color:black;">官网学习</a><br>
                                   <a href="https://hanxinma.gitlab.io/js/zy.html" target="_blank"
                                style="color:black;">辅助学习练习工具</a><br>
                            <a href="http://yaoxiazai.ysepan.com" target="_blank" style="color:black;">网盘下载</a>
                            <br><br>
                        </details>
                    </details>
                </div>
                <div id="kong"></div>
            </div>

            <script>
                // 禁用iframe的滚动事件
                function disableIFrameScroll(iframe) {
                    // 监听鼠标滚轮事件，禁止默认的滚动行为
                    iframe.contentDocument.addEventListener('wheel', e => {
                        e.preventDefault();
                        e.stopPropagation();
                    }, { passive: false });

                    // 监听touchmove事件，禁止默认的滚动行为
                    iframe.contentDocument.addEventListener('touchmove', e => {
                        e.preventDefault();
                        e.stopPropagation();
                    }, { passive: false });
                }
            </script>


            <script>

                window.onload = function () {
                    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);


                    const link = document.createElement("link");
                    link.rel = "stylesheet";
                    link.href = "style.css";
                    document.head.appendChild(link);


                    if (isMobile) {
                        const mobileLink = document.createElement("link");
                        mobileLink.rel = "stylesheet";
                        mobileLink.href = "yidong.css";
                        document.head.appendChild(mobileLink);
                    }

                    else {
                        const desktopLink = document.createElement("link");
                        desktopLink.rel = "stylesheet";
                        desktopLink.href = "srf.css";
                        document.head.appendChild(desktopLink);
                    }
                };

                window.onload = function () {
                    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

                    if (isMobile) {
                        const sjBox = document.getElementById('sjbox');
                        sjBox.checked = true;
                    }
                }


            </script>


            <script>

                var hasRong = false; // 记录用户是否已经打对了“荣”字符
                setInterval(function () {
                    var da = document.getElementById("da");
                    var str = da.value;
                    var arr = str.split('');
                    var isContainAll = true; // 假设文本框中包含所有字符
                    var charsToCheck = [ "恏", "莳", "噍", "噫"]; // 要检查的字符列表

                    var containRong = str.includes('荣'); // 判断文本框中是否包含“荣”
                    if (!hasRong && containRong) { // 如果没打对“荣”，且包含“荣”
                        alert("恭喜你打对了，基本学会了！继续打完剩余的字,可以体验完整版"); // 弹窗提醒用户
                        hasRong = true; // 更新状态
                    }

                    for (var i = 0; i < charsToCheck.length; i++) {
                        if (str.indexOf(charsToCheck[i]) === -1) { // 如果文本框中不包含该字符
                            isContainAll = false; // 将假设标志位设为 false
                            break; // 跳出循环
                        }
                    }

                    if (isContainAll) {
                        window.open("https://hanxinma.gitlab.io/js/shouye"); // 在新窗口中打开百度网站
                    }
                }, 2000); // 每秒执行一次
            </script>
               <script src="cidiana.js"></script>
               <script src="eidksl.js"></script>
               <script src="hxpyty2.js"></script>
               <script src="hedee.js"></script>
               <script src="listd.js"></script>


</body>

</html>